<template>
  <div>
     <h3>欢迎光临-Vue开发的收银系统-水果店</h3>
    <table border="1">
    <tr>
        <td>苹果10￥/斤，折扣: 8折 </td>
    </tr>
    <tr>
        <td>请输入你要买的斤数<input type="text" v-model="number"> </td>
    </tr>
     <tr>
        <td><button @click="buy(number)">结账买单</button> </td>
    </tr>
    <tr>
        <td >结账单: 总价: {{this.total}} ￥元  折后价: {{this.discount}}￥元  省了: {{this.save}}￥元</td>
    </tr>
</table>
  </div>
</template>

<script>
export default {
  name: 'MyVueHomeworkApp',

  data() {
    return {
      number:'',
      total:'',
      discount:'',
      save:''
    };
  },
  methods: {
    buy(number){
     this.total = number * 10
     this.discount = number * 8
     this.save = number * 2
    }
  },
};
</script>
 
<style>
 table {
   text-align: center;
 }
</style>